<template>
  <div class="Register">
    <el-container>
      <el-main>
        <div class="center">
          <!-- 注册 -->
          <div class="register-center">
            <h1>注册</h1>
          </div>
          <!-- 输入框 -->
          <div class="srk">
            <el-input placeholder="请输入手机号码" style="width: 400px;margin-bottom: 30px;"></el-input>
            <br />
            <el-input placeholder="短信验证码" show-password style="width: 252px;margin-bottom: 30px;"></el-input>
            <el-button type="primary" style="margin-left: 45px;" plain>短信验证码</el-button>
            <br />
            <el-input placeholder="邀请码（非必填）" show-password style="width: 400px;"></el-input>
          </div>
          <!-- 协议 -->
          <div class="checkbox">
            <label>
              <input type="checkbox" checked />
              <span>
                已阅读并同意
                <a
                  target="_blank"
                  href="https://home.bihu.com/agreement/"
                  rel="noopener noreferrer"
                >《币乎用户服务协议与隐私政策》</a>
              </span>
            </label>
          </div>
          <!-- 注册按钮 -->
          <div class="btn-box">
            <button class="LoaderButton from-item-btn" type="submit">注册</button>
          </div>
          <!-- 右侧 -->
          <div class="to-right">
            <p>请妥善保存你的Bihu账号及登录密码。</p>
            <p>请勿和其他网站使用相同的登录密码。</p>
            <br />
            <p>
              已有账号？
              <a href>去登录</a>
            </p>
          </div>
        </div>
      </el-main>
      <!-- 底部公共部分 -->
      <el-footer>
        <div class="footer">
          <div class="footer-link">
            <a
              target="_blank"
              href="https://home.bihu.com"
              rel="nofollow me noopener noreferrer"
            >关于我们</a>
            <a target="_blank" href="/ContactUs">联系我们</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/HelpCenter.html"
              rel="nofollow me noopener noreferrer"
            >帮助中心</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/index.html"
              rel="nofollow me noopener noreferrer"
            >用户协议</a>
          </div>
          <div class="footer-record">
            <p class="record">
              ©2020 - BIHU.COM All Rights Reserved
              <span>
                无锡巽雷信息科技有限公司&nbsp;
                <a
                  target="_blank"
                  href="http://www.beian.miit.gov.cn/"
                >苏ICP备20006983号-8</a>&nbsp;
              </span>
            </p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.el-main {
  width: 100%;
  height: 550px;
}
.center {
  width: 1170px;
  height: 510px;
  margin: 0 auto;
}
.register-center {
  padding: 40px 105px 20px;
}
.register-center h1 {
  font-size: 36px;
  color: #5a6169;
  font-weight: 500;
}
.srk {
  margin-left: 90px;
  margin-top: -15px;
}
.btn-box button {
  height: 41px;
  border-radius: 4px;
  width: 400px;
  background: #007bff;
  margin-top: 30px;
  color: #fff;
  margin-left: 105px;
  border: transparent;
}
.to-right {
  float: right;
  margin-top: -310px;
  margin-right: 250px;
}
.to-right p {
  color: #5a6169;
  font-size: 14px;
  margin-bottom: 10px;
}
.to-right a {
  font-size: 14px;
  color: #007bff;
}
.el-button--primary.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  border: transparent;
}
.checkbox {
  margin-top: 22px;
  margin-left: 80px;
}
.checkbox label {
  line-height: 25px;
  font-size: 12px;
  color: #5a6169;
}
.checkbox label,
.radio label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}
.checkbox label input {
  width: 20px;
  height: 20px;
  position: relative;
  top: 6px;
}
.checkbox label a {
  color: #007bff;
}
.footer {
  width: 100%;
  text-align: center;
  color: #5a6169;
}
.footer .footer-link {
  margin-top: 20px;
}
.footer .footer-link a {
  color: #5a6169;
  padding: 0 40px;
}

.footer .footer-record .record {
  text-align: center;
  font-size: 13px;
  margin-top: 18px;
  padding-bottom: 17px;
  color: #5a6169;
}
.footer .footer-record .record span {
  display: block;
  margin-top: 10px;
  color: #5a6169;
}
.footer .footer-record .record a {
  font-size: 11px;
  color: #5a6169;
}
</style>
